<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff"  isBack="true">
			<block slot="content">订单详情</block> 
		</cu-custom>
		<loading-view v-if="showLoading"></loading-view>
		<view class="order-details" v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="index_a">
				<view class="index_a_a">{{orderDetail.order_status_desc}}</view>
				<view class="index_a_b" v-if="orderDetail.order_status==0">
					<u-count-down
					            :time="orderDetail.qx_time"
					            format="HH:mm:ss"
					            autoStart
					            millisecond
								@finish="countDownFinish()"
					            @change="onDownChange"
					    >
							<view class="order_details_a_b_a">
								<text class="order_details_a_b_a_a">请于</text>
								<text class="order_details_a_b_a_a">{{ timeData.minutes }}分</text>
								<text class="order_details_a_b_a_a">{{ timeData.seconds }}秒内付款，超时订单将自动关闭</text>
							</view>
					</u-count-down>
				</view>
			</view>
			<view class="index_d">
				<view class="index_d_a" v-for="(item, index) in orderDetail.curriculum_order_goods" :key="index">
					<view style="overflow: hidden;" @click="goPage('/pages/curriculum/info?id='+item.goods_id)">
						<view class="index_d_a_a">
							<custom-image :lazy-load="true" width="140rpx" height="140rpx" radius="0" lazy-load :src="item.image"></custom-image>
						</view>
						<view class="index_d_a_b">
							<view class="index_d_a_b_a">{{item.goods_name}}</view>
							<view class="index_d_a_b_b">
								<view class="index_d_a_b_b_c">{{item.course_type_name}}</view>
							</view>
							<view class="index_d_a_b_b">
								<view class="order_a_a_b_b_c_a" v-if="item.integral==0 && item.goods_price>0">
									<span>¥</span>{{item.goods_price}}
								</view>
								<view class="order_a_a_b_b_c_a" v-if="item.goods_price==0 && item.integral>0">
									<span>积分</span>{{item.integral}}
								</view>
								<view class="order_a_a_b_b_c_a" v-if="item.goods_price>0 && item.integral>0">
									<span>积分</span>{{item.integral}}+<span>¥</span>{{item.goods_price}}
								</view>
							</view>
						</view>
					</view>
					<view class="index_d_a_d" v-if="item.after_status_desc">{{item.after_status_desc}}</view>
					<view class="index_d_a_c" @click="goPage('/pages/apply_refund/curriculum_apply_refund?order_id=' + item.order_id + '&goods_id=' + item.goods_id)" v-if="item.refund_btn">申请退款</view>
				</view>
			</view>
			<view class="index_d" style="margin-top: 20rpx;">
				<view class="confirm_order_a">
					<view class="confirm_order_a_a">
						<view class="confirm_order_a_a_a">订单编号</view>
						<view class="confirm_order_a_a_b" style="width: 530rpx; float: right;">{{orderDetail.order_sn}}</view>
					</view>
					<view class="confirm_order_a_a">
						<view class="confirm_order_a_a_a">下单时间</view>
						<view class="confirm_order_a_a_b" style="width: 530rpx; float: right;">{{orderDetail.create_time}}</view>
					</view>
					<view class="confirm_order_a_a" v-if="orderDetail.order_status==1 ||orderDetail.order_status==2 ||orderDetail.order_status==3">
						<view class="confirm_order_a_a_a">付款时间</view>
						<view class="confirm_order_a_a_b" style="width: 530rpx; float: right;">{{orderDetail.pay_time}}</view>
					</view>
					<view class="confirm_order_a_a" v-if="orderDetail.order_status==1 ||orderDetail.order_status==2 ||orderDetail.order_status==3">
						<view class="confirm_order_a_a_a">付款方式</view>
						<view class="confirm_order_a_a_b" style="width: 530rpx; float: right;">{{orderDetail.pay_way_text}}</view>
					</view>
					<view class="index_d_d">
						<view class="index_d_d_b">
							<view class="order_a_a_b_b_c_a" v-if="orderDetail.order_integral==0 && orderDetail.order_amount>0">
								<span>¥</span>{{orderDetail.order_amount}}
							</view>
							<view class="order_a_a_b_b_c_a" v-if="orderDetail.order_amount==0 && orderDetail.order_integral>0">
								<span>积分</span>{{orderDetail.order_integral}}
							</view>
							<view class="order_a_a_b_b_c_a" v-if="orderDetail.order_amount>0 && orderDetail.order_integral>0">
								<span>积分</span>{{orderDetail.order_integral}}+<span>¥</span>{{orderDetail.order_amount}}
							</view>
						</view>
						<view class="index_d_d_a">需支付：</view>
					</view>
				</view>
			</view>
			<view style="width: 750rpx;height: 150rpx;" v-if="orderDetail.order_status==0"></view>
			<view class="user_money_log_b_c" v-if="orderDetail.order_status==0">
				<view class="user_money_log_b_c_b" v-if="orderDetail.order_status==0" @click="goPage('/pages/confirm_order/order_details?order_sn='+orderDetail.order_sn+'&from=curriculum')" style="background-color: #fff;border:1rpx solid #E71102;color:#E71102;">付款</view>
				<view class="user_money_log_b_c_b" v-if="orderDetail.order_status==0" @click="order_cancel_click()" style="margin-right: 15rpx; background-color: #fff;border:1rpx solid #DCDCDC;color:#666666;">取消订单</view>
			</view>
		</view>
	</view>
</template>
<script>
import request from '@/common/request.js';	
import {
	loadingType
} from '@/utils/type';
export default {
	data() {
		return {
			showLoading:true,
			o_dz_dingwei:request.baseUrl_img+'/img/o_dz_dingwei.png',
			gengduo_icon:request.baseUrl_img+'/img/gengduo_icon.png',
			timeData:{},
			orderDetail:[],
			delivery_info:[],
			order_sn:0,
			uid:0
		}
	},
	onLoad: function(options) {
		this.order_sn =options.order_sn;
	},
	onShow(){
		this.uid=uni.getStorageSync('uid');
		this.getOrderDetailFun();
	},
	methods: {
		order_cancel_click(){
			let _this=this;
			uni.showModal({
				title: '提示',
				content: '您确认取消该订单吗？',
				success: function (res) {
					if (res.confirm) {
						_this.order_cancel_post();
					}
				}
			});
		},
		
		order_cancel_post(){
			let paramsList = {
				uid:this.uid,
				order_id:this.orderDetail.id,
			}
			let optsList = {
				url: 'o-order_cancel',
				method: 'post'
			};
			uni.showLoading({
				title: '取消中',
				mask: true
			})
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				if(res.data.code == 200){
					uni.$emit("refreshorder")
					_this.getOrderDetailFun();
				}else{
					uni.showToast({
						title: res.data.msg,
						icon:'none',
						duration: 2000
					});
				}
			});
		},
		onDownChange(e){
			this.timeData = e
		},
		countDownFinish() {
			this.order_cancel_post();
		},
		goPage(url) {
			if (!this.$util.isLogin()) {
				return;
			}
			uni.navigateTo({
				url
			});
		},
		getOrderDetailFun(){
			let paramsList = {
				uid:this.uid,
				order_sn:this.order_sn
			}
			let optsList = {
				url: 'o-curriculumdetail',
				method: 'post'
			};
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					_this.orderDetail=res.data.data;
					_this.delivery_info=_this.orderDetail.delivery;
				}else{
					setTimeout(() => uni.navigateBack(), 1500);
					return;
				}
				this.showLoading=false;
			});
		}
	}
}
</script>

<style  lang="scss" scoped>
	.user_money_log_b_c{
		width: 750rpx;
		height: 130rpx;
		line-height: 130rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		padding: 0 45rpx;
	}
	
	.user_money_log_b_c_b{
		width: 160rpx;
		height: 70rpx;
		background: #3DB18A;
		border-radius: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 65rpx;
		text-align: center;
		float: right;
		border: 2rpx solid #3DB18A;
		margin-top: 20rpx;
	}
	.order_bb{
		width: 750rpx;
		height: 104rpx;
		position:fixed;
		bottom: 0;
		background: #FFFFFF;
	}
	.order_bb_a{
		padding: 12rpx 30rpx;
		overflow: hidden;
	}
	.order_bb_a_a{
		width: 50%;
		height: 80rpx;
		background: #FA7428;
		border-radius: 40rpx 0px 0px 40rpx;
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}
	.order_bb_a_b{
		width: 50%;
		height: 80rpx;
		background: #FA7428;
		opacity: 0.5;
		border-radius: 0px 40rpx 40rpx 0px;
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}
	.order_bb_a_c{
		width: 326rpx;
		height: 80rpx;
		background: #FFFFFF;
		border: 2rpx solid #FA7428;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FA7428;
		float: left;
	}
	.order_bb_a_d{
		width: 326rpx;
		height: 80rpx;
		background: #FA7428;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		float: left;
		margin-left: 40rpx;
	}
	.order_bb_a_e{
		width: 690rpx;
		height: 80rpx;
		background: #FA7428;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.address_a{
		width: 750rpx;
		height:auto;
		overflow: hidden;
		background: #FFFFFF;
		padding: 33rpx 23rpx;
		margin: auto;
		margin-bottom: 20rpx;
	}
	.address_a_a{
		width: 66rpx;
		height:80rpx;
		float: left;
		background-position: center;
		background-repeat: no-repeat;
		background-size:40rpx;
		border-radius: 50%;
	}
	.address_a_b{
		float: left;
		margin-left: 25rpx;
		width: 490rpx;
	}
	.address_a_b_a{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 16rpx;
	}
	.address_a_b_b{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.address_a_c{
		float:right;
		background-position:right;
		background-size: 11rpx 20rpx;
		background-repeat: no-repeat;
		height: 111rpx;
		width: 20rpx;
	}
	.address_a_d{
		overflow: hidden;
		width: 500rpx;
		float: left;
		margin-left:10rpx;
	}
	.address_a_d_a{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color:#000022;
	}
	.address_a_d_a span{
		margin-left: 20rpx;
	}
	.address_a_d_b{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.index_a{
		width: 750rpx;
		height: auto;
		background: #FFFFFF;
		padding:50rpx 47rpx;
	}
	.index_a_a{
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
	}
	.index_a_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.index_c{
		width: 750rpx;
		height: 104rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
	}
	.index_c_a{
		width: 702rpx;
		height: 80rpx;
		background: #FA7428;
		border-radius: 40rpx;
		margin: auto;
		margin-top: 12rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}
	.confirm_order_a{
		width:100%;
		height: auto;
		margin: auto;
		background: #FFFFFF;
	}
	.confirm_order_a_a{
		height: 80rpx;
		line-height: 80rpx;
		overflow: hidden;
	}
	.confirm_order_a_a_a{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		float: left;
		background-position:right;
		background-size: 11rpx 20rpx;
		background-repeat: no-repeat;
		overflow: hidden;
	}
	.confirm_order_a_a_b{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		width: 100%;
	}
	.confirm_order_a_a_c{
		width: 100%;
		height:auto;
		overflow: hidden;
	}
	.confirm_order_a_a_c_a{
		height: 80rpx;
		line-height: 80rpx;
		overflow: hidden;
	}
	.confirm_order_a_a_c_a_a{
		float: left;
		width: 25%;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
	}
	.confirm_order_b{
		height: 106rpx;
		line-height: 106rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		width: 100%;
		margin: auto;
	}
	.confirm_order_b span{
		color:#FA7428;
	}
	.confirm_order_b_a{
		float: left;
		width: 33.33%;
	}
	.index_d{
		width: 710rpx;
		margin: auto;
		height:auto;
		background-color: #FFFFFF;
		padding:30rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
	.index_d_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #353535;
	}
	.index_d_a{
		width: 100%;
		height:auto;
		padding:30rpx 0;
		overflow: hidden;
		margin: auto;
		background: #FFFFFF;
	}
	.index_d_a_a{
		width: 140rpx;
		height: 140rpx;
		border-radius: 15rpx;
		overflow: hidden;
		float: left;
	}
	.index_d_a_b{
		width:440rpx;
		margin-left: 30rpx;
		height: auto;
		float: left;
		position: relative;
	}
	.index_d_a_b_a{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		height: 40rpx;
		overflow: hidden;
		line-height: 40rpx;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.index_d_a_b_b{
		margin-top: 10rpx;
		overflow: hidden;
		width: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.index_d_a_b_b_a{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		float: left;
		line-height: 42rpx;
	}
	.index_d_a_b_b_b{
		float: left;
	}
	.index_d_a_b_b_d{
		float: left;
		line-height: 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FF6000;
	}
	.index_d_a_b_b_e{
		float: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #CCCCCC;
		line-height: 50rpx;
	}
	.index_d_a_b_b_b_a{
		background: #FFFFFF;
		border: 1px solid #E5E5E5;
		border-radius: 5px;
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 10rpx;
		float: left;
		margin-left: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FA7428;
	}
	.index_d_a_b_b_c{
		float: left;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 42rpx;
		overflow: hidden;
		width: 350rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.order_a_a_b_b_c_a{
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF4D4F;
	}
	.order_a_a_b_b_c_a span{
		font-size: 24rpx;
	}
	.index_d_a_b_c{
		width: 44rpx;
		height: 44rpx;
		background: #E5E5E5;
		border-radius: 50%;
		position:absolute;
		right: 0rpx;
		top:68rpx;
		background-repeat: no-repeat;
		background-position:center;
		background-size: 21rpx 15rpx;
	}
	.index_d_a_c{
		width: 160rpx;
		height: 70rpx;
		background: #FFFFFF;
		border:1px solid #DCDCDC;
		border-radius: 35rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #E71102;
		text-align: center;
		line-height: 70rpx;
		float: right;
		margin-top: 20rpx;
	}
	.index_d_a_d{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF6000;
		text-align: right;
	}
	.index_d_c{
		height: 80rpx;
		line-height: 80rpx;
	}
	.index_d_c_a{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		float: left;
	}
	.index_d_c_b{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		float: right;
	}
	.index_d_d{
		height: 100rpx;
		line-height: 100rpx;
	}
	.index_d_d_a{
		float: right;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
	.index_d_d_b{
		float: right;
		font-size: 47rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:#FF6000;
	}
</style>
